<template>
  <div>
    <Box>
      <div slot="title" style="height: 0px"></div>
      <div slot="box" >
        <a-form-model ref="ruleForm"  layout="inline" :model="data">
          <a-form-model-item label="案件名称" prop="name">
            <a-input v-model="data.name" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="开始日期" prop="date">
            <a-date-picker v-model="data.date" @change="onChange" />
          </a-form-model-item>
          <a-form-model-item label="状态" prop="state">
            <a-radio-group v-model="data.state">
              <a-radio value="">
                全部
              </a-radio>
              <a-radio value="进行中">
                进行中
              </a-radio>
              <a-radio value="已完结">
                已完结
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item >
            <a-button type="primary" @click="query">
              查询
            </a-button>
            <a-button style="margin-left: 10px;" @click="resetForm">
              重置
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </Box>
  </div>
</template>

<script>
import Box from '@/views/xlgc/Box/index'
import { getDictItemsFromCache } from '@api/api'

export default {
  name: 'queryFacility',
  components:{Box},
  data(){
    return {
      data:{
        name:'',
        state:'',
        date:''
      },
      rules: {
        name: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
        state: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
        occurrenceDate: [{ required: true, message: 'Please pick a date', trigger: 'change' }],
      },
    }
  },

  methods:{
    resetForm() {
      this.$refs.ruleForm.resetFields();
      this.$emit('querys',this.data)
    },
    onChange(date, dateString) {
      console.log(dateString)
      this.data.date = dateString
    },
    query(){
      console.log(this.data);
      this.$emit('querys',this.data)
    },
    handleChange1(val){
      this.data.level = val
      return val
    },
    onChange2(date, dateString) {
      // console.log(date, dateString);
      this.data.occurrenceDate = dateString
    },
    filterMultiDictText(dictCode, text) {
      console.log(dictCode,text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
    onChange1(e) {
      console.log(e.target.value);
      if(e.target.value == '1'){
        this.data.state = ''
      }if(e.target.value == '2'){
        this.data.state = '进行中'
      }if(e.target.value == '3'){
        this.data.state = '已完结'
      }
    },
  }
}
</script>

<style scoped>
.gutter-row{
  display: flex;
  align-items: center;
}
</style>